<template>
  <div class="   pt-16  min-h-screen w-full bg-white">
       <NavWap  class="xl:hidden" @showBigSlideMenu="showBigSlideMenu"  />
      <NavPc  class="hidden xl:block" @showBigSlideMenu="showBigSlideMenu"  />
    <input type="checkbox" id="my-modal-recaptchaBox" class="modal-toggle">     
            <div class="modal">
            <div class="modal-box">
             <div id="recaptchaBox"></div>
              <div class="modal-action">
                <label for="my-modal-recaptchaBox" class="btn">Close</label>
              </div>
            </div>
          </div>
  <div style="max-width:800px; margin:0 auto" class="p-2">
     
       <div class="alert alert-success" style="border-radius: inherit;background-color: inherit;"   >
        <div class="flex-1">
           <label>  
Please enter your <strong>email address</strong> and we will send you an email with instructions on how to reset your account.
</label>
        </div>
        
      </div>
      <div>
          <div class="form-control">
           
          <input type="text" v-model="email" placeholder="Enter Email Address" class="input input-bordered">
        </div>


         <button @click="reset" class="group relative w-full flex justify-center p-4 mt-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          
         Reset Password
        </button>

        </div>
</div>
 
  </div>
</template>
 

<script>

export default {
  head() {
    return {
   
      script: [
        {
          src: 'https://www.google.com/recaptcha/api.js',
          ssr: true,
           async:true,
            defer:true
        },
        //  {
        //   src: 'https://ssl.captcha.qq.com/TCaptcha.js',
        //   ssr: true,
        // }
        
      ],

       
    };
  },
    data(){
        return{
             slideTpye:'small',
            email:"",
            pl:"pl-0" 
        }
    },
     layout({req}){
      return "web";
    },
     async asyncData({params,$Data,error,redirect}) {
         return {}
     },
     methods:{
       async send(){
          let post = {
             email:this.email,
             recaptcha_response:this.recaptcha_response,
             recaptcha_type:this.recaptcha_type
          }
         
          let res = await  this.$axios.post("snogogo_nuxt/user/reset",post )
          if(res.code>0){
            this.reg_type="";
            this.$tools.alert("error", res.msg)
            return;
          }
          this.$tools.alert("success", "If the specified address corresponds to an existing user account, a password reset email was sent. Please note that only one email will be sent per minute.",1000000)
        
       },
       async reset(){

         if(this.email==""){
           this.$tools.alert("error","Email cannot be empty!",100000)
              return;
         }
        
        if(typeof grecaptcha =="undefined"  ){
          this.$tools.alert("error","Google recaptcha Load failed , Refresh or wait for the load to complete!")
          return;
        }
        
           document.getElementById("my-modal-recaptchaBox").checked=true
             //this.$tools.showToast();
        // google
        if(typeof grecaptcha !="undefined" && this.grecaptchaRender !=1){
           grecaptcha.render('recaptchaBox', {
            'sitekey' : '6Lc_r2UeAAAAAFo61Wo9B5YKUsAp2inwktCZUrET',
            'callback' : (recaptcha_response)=>{
              console.log(recaptcha_response);
              this.recaptcha_type ="google";
              this.recaptcha_response = recaptcha_response;
              this.send();
            },
            'theme' : 'dark'
          });
          this.grecaptchaRender =1;
          return;
        }
       
// 腾讯验证码
        
      if(typeof TencentCaptcha !="undefined"){
          new TencentCaptcha(document.getElementById('tcRecaptchaBox'),"2007556418",(res)=>{
                    console.log(res);
                    this.recaptcha_type ="tencent";
                    this.recaptcha_response = res;
                    this.send();
          },{type:'popup','userLanguage':"en"}).show();
           return;
      }
      
       
         
        
     },
         // 左侧菜单显示
     showBigSlideMenu(){
        // //console.log("per:pl",this.pl,"slideTpye:",this.slideTpye)
        if(this.slideTpye=="small"){
          this.slideTpye="big";
          this.pl="pl-0 md:pl-60";
        }else{
          this.slideTpye="small";
          this.pl="pl-0";
        }
     }
     }
}
</script>